<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="支付订单号">
              <a-input v-model="adTakeOrderReqDto.tradeNo" placeholder="请输入支付订单号"/>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item label="第三方订单号">
              <a-input v-model="adTakeOrderReqDto.paymentNo" placeholder="请输入第三方订单号"/>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item label="会员号">
              <a-input v-model="adTakeOrderReqDto.memberNo" placeholder="请输入会员号"/>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-form-item label="手机号">
              <a-input v-model="adTakeOrderReqDto.purePhoneNumber" placeholder="请输入手机号"/>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="提现类型">
              <a-select v-model="adTakeOrderReqDto.tradeType" placeholder="请选择提现类型">
                <a-select-option value="AMOUNT">金额</a-select-option>
                <a-select-option value="SHOP_COIN">铺币</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <a-form-item label="状态">
              <a-select v-model="adTakeOrderReqDto.tradeStatus" placeholder="请选择状态">
                <a-select-option value="">请选择状态</a-select-option>
                <a-select-option value="0">待审核</a-select-option>
                <a-select-option value="1">审核通过</a-select-option>
                <a-select-option value="2">审核不通过</a-select-option>
                <a-select-option value="3">已打款</a-select-option>
                <a-select-option value="4">打款失败</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleOk">查询</a-button>
              <a-button style="margin-left: 8px" @click="queryParamReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <table-ext
      ref="table"
      size="default"
      bordered
      rowKey="id"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
    >
      <span slot="avatarUrl" slot-scope="avatarUrl">
        <a-avatar :src="avatarUrl" />
      </span>
      <span slot="tradeStatus" slot-scope="text">
        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a v-if="record.tradeStatus == 0" @click="auditOrder(record)">审核</a>
        </template>
      </span>
    </table-ext>
    <a-modal
      v-model="orderAuditVisible"
      title="审核详情"
      :closable="true"
      @ok="handleSubmit"
      @cancel="handleCancel"
    >
      <a-form>
        <a-form-item label="支付订单号">
          <a-input v-model="adTakeOrderAuditReqDto.tradeNo" disabled/>
        </a-form-item>
        <a-form-item label="审核状态">
          <a-select v-model="adTakeOrderAuditReqDto.tradeStatus" placeholder="请选择审核状态" :default-value="1">
            <a-select-option :value="1" >审核通过</a-select-option>
            <a-select-option :value="4">审核不通过</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="原因">
          <a-input v-model="adTakeOrderAuditReqDto.remark" type="textarea" placeholder="原因"/>
        </a-form-item>
      </a-form>
    </a-modal>

  </a-card>
</template>

<script>
import { TableExt } from '@/components'
import { getPageList, auditOrder } from '@/api/paymentTrade/paymentTrade'
const statusMap = {
  0: {
    status: 'processing',
    text: '待审核'
  },
  1: {
    status: 'success',
    text: '审核通过'
  },
  2: {
    status: 'success',
    text: '已打款'
  },
  3: {
    status: 'warning',
    text: '打款失败'
  },
  4: {
    status: 'error',
    text: '审核不通过'
  }
}

export default {
  name: 'TableList',
  components: {
    TableExt
  },
  data () {
    return {
      mdl: {},
      orderAuditVisible: false,
      adTakeOrderAuditReqDto: {
        tradeNo: '',
        tradeStatus: 1,
        remark: ''
      },
      // 查询参数
      adTakeOrderReqDto: {
        tradeNo: '',
        paymentNo: '',
        tradeStatus: '',
        memberNo: '',
        purePhoneNumber: '',
        tradeType: 'AMOUNT',
        current: 1,
        pageSize: 10
      },
      initQueryParams: [],
      // 表头
      columns: [
        {
          title: 'ID',
          align: 'center',
          dataIndex: 'id'
        },
        {
          title: '支付订单号',
          align: 'center',
          dataIndex: 'tradeNo'
        },
        {
          title: '微信订单号',
          align: 'center',
          dataIndex: 'paymentNo'
        },
        {
          title: '会员号',
          align: 'center',
          dataIndex: 'memberNo'
        },
        {
          title: '手机号',
          align: 'center',
          dataIndex: 'purePhoneNumber'
        },
        {
          title: '金额(元)',
          align: 'center',
          dataIndex: 'totalAmount'
        },
        {
          title: '微信支付成功时间',
          align: 'center',
          dataIndex: 'paymentTime'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'tradeStatus',
          scopedSlots: { customRender: 'tradeStatus' }
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'gmtCreate'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.adTakeOrderReqDto.current = parameter.current
        this.adTakeOrderReqDto.pageSize = parameter.pageSize
        return getPageList(this.adTakeOrderReqDto).then(res => {
          return res.data
        })
      }
    }
  },
  filters: {
    statusFilter (type) {
      return statusMap[type].text
    },
    statusTypeFilter (type) {
      return statusMap[type].status
    }
  },
  created () {
    this.initQueryParams = JSON.parse(JSON.stringify(this.adTakeOrderReqDto))
  },
  methods: {
    handleOk () {
      this.$refs.table.refresh()
    },
    queryParamReset () {
      this.adTakeOrderReqDto = JSON.parse(JSON.stringify(this.initQueryParams))
      this.handleOk()
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    auditOrder (record) {
      this.adTakeOrderAuditReqDto.tradeStatus = null
      this.adTakeOrderAuditReqDto.remark = null
      this.adTakeOrderAuditReqDto.tradeNo = record.tradeNo
      this.orderAuditVisible = true
    },
    handleCancel () {
      this.orderAuditVisible = false
    },
    handleSubmit () {
      if (this.adTakeOrderAuditReqDto.tradeStatus == null || this.adTakeOrderAuditReqDto.tradeStatus === '') {
        this.$message.error('请选择审核状态')
        return
      }
      if (this.adTakeOrderAuditReqDto.tradeStatus === 4 && (this.adTakeOrderAuditReqDto.remark == null || this.adTakeOrderAuditReqDto.remark === '')) {
        this.$message.error('请填写审核不通过原因')
        return
      }
      auditOrder(this.adTakeOrderAuditReqDto).then(res => {
        if (res.code === 200) {
          this.$message.success('审核成功')
        } else {
          this.$message.error(res.message)
        }
        this.orderAuditVisible = false
        this.handleOk()
      }).catch(err => {
        this.$message.error(err.message)
      })
    }
  }
}
</script>
